<template>
  <div class="activity-management">
    <h2>活动管理</h2>
    <div>
      <h3>活动列表</h3>
      <ul>
        <li v-for="activity in activities" :key="activity.id">
          <strong>{{ activity.title }}</strong>
          <p>{{ activity.description }}</p>
          <p>日期：{{ activity.date }}</p>
          <p>地点：{{ activity.location }}</p>
          <button @click="editActivity(activity.id)">编辑</button>
          <button @click="deleteActivity(activity.id)">删除</button>
        </li>
      </ul>
    </div>
    <div>
      <h3>添加活动</h3>
      <form @submit.prevent="addActivity">
        <div>
          <label>标题：</label>
          <input v-model="newActivity.title" placeholder="活动标题" required />
        </div>
        <div>
          <label>描述：</label>
          <textarea v-model="newActivity.description" placeholder="活动描述" required></textarea>
        </div>
        <div>
          <label>日期：</label>
          <input v-model="newActivity.date" type="date" required />
        </div>
        <div>
          <label>地点：</label>
          <input v-model="newActivity.location" placeholder="活动地点" required />
        </div>
        <button type="submit">添加活动</button>
      </form>
    </div>
    <div v-if="editingActivity">
      <h3>编辑活动</h3>
      <form @submit.prevent="updateActivity">
        <div>
          <label>标题：</label>
          <input v-model="editingActivity.title" placeholder="活动标题" required />
        </div>
        <div>
          <label>描述：</label>
          <textarea v-model="editingActivity.description" placeholder="活动描述" required></textarea>
        </div>
        <div>
          <label>日期：</label>
          <input v-model="editingActivity.date" type="date" required />
        </div>
        <div>
          <label>地点：</label>
          <input v-model="editingActivity.location" placeholder="活动地点" required />
        </div>
        <button type="submit">更新活动</button>
        <button @click="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import activities from '@/data/activities';

export default {
  data() {
    return {
      activities: activities,
      newActivity: {
        id: activities.length + 1,
        title: '',
        description: '',
        date: '',
        location: ''
      },
      editingActivity: null
    };
  },
  methods: {
    addActivity() {
      this.activities.push(this.newActivity);
      this.newActivity = {
        id: this.activities.length + 1,
        title: '',
        description: '',
        date: '',
        location: ''
      };
    },
    deleteActivity(id) {
      const index = this.activities.findIndex(activity => activity.id === id);
      if (index !== -1) {
        this.activities.splice(index, 1);
      }
    },
    editActivity(id) {
      this.editingActivity = { ...this.activities.find(activity => activity.id === id) };
    },
    updateActivity() {
      const index = this.activities.findIndex(activity => activity.id === this.editingActivity.id);
      if (index !== -1) {
        this.activities.splice(index, 1, this.editingActivity);
      }
      this.editingActivity = null;
    },
    cancelEdit() {
      this.editingActivity = null;
    }
  }
};
</script>

<style scoped>
.activity-management {
  max-width: 800px;
  margin: 0 auto;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 20px;
}
form {
  display: flex;
  flex-direction: column;
}
form div {
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input, textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 8px 16px;
  margin-top: 10px;
}
</style>